define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  var SearchHeaderView = Backbone.View.extend({
    el: $('#mob-container'),
    initialize: function() {
      this.render();
    },
    render: function() {
      console.log('[DEBUG] Rendering Search Page.');
      var h = [];
      h.push('<div class="mob-search-header-container">');

      h.push('<div id="mob-search-dropdown" class="mob-search-header-dropdown">');
      h.push('<div class="mob-search-header-dropdown-text"><span>全部</span><div class="mob-select-icon"></div>');
      h.push('</div>');
      h.push('<div class="mob-search-header-dropdown-content mob-hide">');
      h.push('<div class="mob-search-content-icon"></div>');
      h.push('<ul>');
      h.push('<li>全部</li>');
      h.push('<li>拼箱</li>');
      h.push('<li>散货</li>');
      h.push('<li>车辆</li>');
      h.push('</ul>');
      h.push('</div>');
      h.push('</div>');

      h.push('<div class="mob-search-header-input">');
      h.push('<a title="重新输入" id="mob-search-close" class="mob-search-close mob-hide">×</a>');
      h.push('<input type="text" placeholder="搜索关键字"/>');
      h.push('</div>');

      h.push('<div class="mob-search-header-cancel">');
      h.push('取消');
      h.push('</div>');

      h.push('</div>');
      this.$el.append(h.join(''));
    },
    events: {
      'click #mob-search-dropdown': 'dropdownPopup',
      'click #mob-search-dropdown li': 'onItemSelect',
      'keyup .mob-search-header-input>input': 'showSearchClose',
      'click #mob-search-close': 'clearSearch',
      'click .mob-search-header-cancel': 'onCancel'
    },
    dropdownPopup: function() {
      var dropdown = this.$el.find('.mob-search-header-dropdown-content');
      if (dropdown.hasClass('mob-hide')) {
        dropdown.removeClass('mob-hide');
      }
    },
    onItemSelect: function(e) {
      var selectedItem = $(e.target),
        text = selectedItem.text();
      if (text) {
        $('.mob-search-header-dropdown-text span', this.$el).text(text);
        $('.mob-search-header-dropdown-content', this.$el).addClass('mob-hide');
      }
    },
    showSearchClose: function() {
      var close = $('#mob-search-close', this.$el);
      if ($('.mob-search-header-dropdown-text span', this.$el).text()) {
        close.removeClass('mob-hide');
      } else {
        close.addClass('mob-hide');
      }
    },
    clearSearch: function() {
      $('.mob-search-header-input>input', this.$el).val('');
      $('#mob-search-close', this.$el).addClass('mob-hide');
    },
    onCancel: function(e) {
      console.log(e.target);
    }
  });

  return SearchHeaderView;
});
